<template>
  <div>
    <tab-bar>
        <TabBarItem path="/home">
            <template #slot-icon>
              <svg-icon iconName="home" className=""></svg-icon> 
            </template>
            <template #slot-text>
              <div class="itemtext">首页</div>
            </template>
        </TabBarItem>
        <TabBarItem path="/category">
            <template #slot-icon>
              <svg-icon iconName="category" className=""></svg-icon> 
            </template>
            <template v-slot:slot-text>
                 <div class="itemtext">分类</div>
            </template>
        </TabBarItem>
        <TabBarItem path="/cart">
            <template #slot-icon>
              <svg-icon iconName="cart" className=""></svg-icon> 
            </template>
            <template v-slot:slot-text>
                 <div class="itemtext">购物车</div>
            </template>
        </TabBarItem>
        <TabBarItem path="/profile">
            <template #slot-icon>
              <svg-icon iconName="profile" className=""></svg-icon> 
            </template>
            <template v-slot:slot-text>
                 <div class="itemtext">我的</div>
            </template>
        </TabBarItem>
    </tab-bar>
  </div>
</template>

<script>
  import TabBar from 'components/common/tabbar/TabBar'
  import TabBarItem from 'components/common/tabbar/TabBarItem'

  export default {
  name: 'MainTabBar',
  components: {
    TabBar,
    TabBarItem
  }
}

</script>

<style scoped>
  .itemtext {
    height: 20px;
    line-height: 20px;
  }
</style>